<template>
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false" v-dialogDrag>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
               label-width="68px">
          <el-form-item label="单据号" prop="nos">
            <el-input v-model="queryParams.nos" placeholder="请输入单据号"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="订单编号" prop="projectNo">
            <el-input v-model="queryParams.projectNo" placeholder="请输入订单编号"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="产品编码" prop="code">
            <el-input v-model="queryParams.code" placeholder="请输入产品编码"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="产品名称" prop="goodsName">
            <el-input v-model="queryParams.params['goodsName']" placeholder="请输入产品名称"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="产品型号" prop="goodsModel">
            <el-input v-model="queryParams.params['goodsModel']" placeholder="请输入产品型号"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="queryParams.customerName" placeholder="请输入客户名称"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="销售员" prop="saleName">
            <el-input v-model="queryParams.saleName" placeholder="请输入销售人姓名"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="是否自制" prop="isdo">
            <el-select v-model="queryParams.isdo" placeholder="是否自制" clearable style="width: 130px">
              <el-option v-for="dict in dict.type.isdo" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table border v-loading="loading" :data="dataList"  ref="table"
                show-summary :summary-method="getSummaries"
                :max-height="tableMaxHeight" @sort-change="handleSortChange">
        <el-table-column sortable label="入库单号" align="center" prop="nos"/>
        <el-table-column sortable label="订单编号" align="center" prop="projectNo"/>
        <el-table-column sortable label="产品编码" align="center" prop="params.goodsCode"/>
        <el-table-column sortable label="产品名称" align="center" prop="params.goodsName"/>
        <el-table-column sortable label="产品型号" align="center" prop="params.goodsModel"/>
        <el-table-column sortable label="产品数量" align="center" prop="daohuoCount"/>
        <el-table-column  label="重量" align="center" prop="dun"/>
        <el-table-column  label="单价" align="center" prop="goodsBuyPrice"/>
        <el-table-column  label="总价" align="center" prop="goodsBuyTotal"/>
        <el-table-column sortable label="单位" align="center" prop="unit"/>
        <el-table-column sortable label="客户名称" align="center" prop="customerName" show-overflow-tooltip/>
        <el-table-column sortable label="销售人姓名" align="center" prop="saleName"/>
        <el-table-column sortable label="质检人" align="center" prop="zhijianName"/>
        <el-table-column sortable label="质检时间" align="center" prop="zhijianDate"/>
        <el-table-column sortable label="出入库类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.churuku_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column sortable label="是否自制" align="center" prop="isdo">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.isdo" :value="scope.row.isdo"/>
          </template>
        </el-table-column>
        <el-table-column sortable label="入库日期" align="center" prop="rukudate" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.rukudate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable label="入库人" align="center" prop="rukuren"/>
        <el-table-column sortable label="操作工" align="center" prop="douser"show-overflow-tooltip/>
        <el-table-column sortable label="自制产品备注" align="center" prop="doremark"show-overflow-tooltip/>
        <el-table-column sortable label="其他备注" align="center" prop="remark"show-overflow-tooltip/>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getList"/>
    </div>
  </el-dialog>
</template>

<script>
import {accAdd, deleteAction, getAction} from '@/api/manage'

  export default {
    name: "RukuMingxiList",
    dicts: ['isdo','goods_type','churuku_type','storage_state'],
    components: {
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        activeName: "first",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 采购单表格数据
        dataList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          params:{},
          nos: null,
          projectId: null,
          projectNo: null,
          code: null,
          customerName: null,
          saleName: null,
          isZhijian: "1",
          parentId: null,
          orderByColumn: "goods_id",
          isAsc: "asc",
        },
        rowData:{},
        url: {
          list: '/lvRukumingxi/lvRukumingxi/list',
        },
        tableMaxHeight: window.innerHeight - 320,
      };
    },
    created() {
      window.addEventListener('resize', this.getTableHeight);
    },
    methods: {


      /** 新增按钮操作 */
      showByRukuId(rukuId) {
        this.open = true;
        this.title = "入库明细";
        this.queryParams.parentId=rukuId;
        this.getList();
      },

      /** 查询采购单列表 */
      getList() {
        this.loading = true;
        getAction(this.url.list, this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getTableHeight() {
        this.tableHeight = window.innerHeight - 320
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
       /** 排序触发事件 */
      handleSortChange(column, prop, order) {
        this.queryParams.orderByColumn = column.prop;
        this.queryParams.isAsc = column.order;
        this.handleQuery();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
      },

      getSummaries(param) {
        // console.log(param);
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          const values = data.map((item) => Number(item[column.property]));
          // 只合计amount1和amount3，想合并哪些列就在这里指定
          if (column.property === "goodsBuyTotal") {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return accAdd(prev, curr);
              } else {
                return prev;
              }
            }, 0);
          }
        });
        return sums;
      },


    }
  };
</script>
